<template>
	<view class="content">
    <view class="title">
      <view class="title">
        <view class="search-bar">
          <view class="search-bar-box">
            <image class="search-span" src="../../static/activity/science/logo1.svg" />
            <input type="text" v-model="input" class="search-text" />
            <button class="search-btn" @click="handleSearch">搜索</button>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="sciencePage">
        <view class="itemBox">
          <view class="item" v-for="item in dataList" :key="item.id" @click="handleClickScienceDetail(item)">
            <view class="title">
              {{item.title}}
            </view>
            <view class="bottomBox">
              <view class="textBox">
                <view class="text">
                  {{item.content}}
                </view>
                <view class="time">
                  {{item.createTime}}
                </view>
              </view>
              <view class="pic">
                <image :src="item.picture"></image>
              </view>
            </view>
          </view>
          <view class="none">
            没有更多了...
          </view>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
	import {
		getScienceList
	} from "../../request/api";

	export default {
		data() {
			return {
				input: '',
				dataList: [],
				pageInfo: {
					current: 1,
					pageSize: 5,
					total: 0
				}
			}
		},
		onReachBottom() {
			if (this.dataList.length < this.pageInfo.total) {
				this.pageInfo.current++
				this.getScienceList()
			}
		},
		onShow() {
			this.dataList.splice(0)
			this.getScienceList()
		},
		methods: {
			getScienceList() {
				getScienceList({
					current: this.pageInfo.current,
					pageSize: this.pageInfo.pageSize,
					key: this.input
				}).then(res => {
					if (res.data.code === 200) {
						this.pageInfo.total = res.data.data.total
						let dataList = Array.from(res.data.data.records)
						dataList.forEach(item => {
							let date = new Date(item.createTime)
							item.createTime = date.getUTCFullYear().toString() + '-' + (date
							.getUTCMonth() + 1) + '-' + date.getUTCDate()
						})
						if (this.dataList.length <= 0) {
							this.dataList = dataList
						} else {
							dataList.forEach(item => {
								this.dataList.push(item)
							})
						}
					}
				})
			},
			handleClickScienceDetail(item) {
				uni.navigateTo({
					url: `/pages/scienceDetail/scienceDetail?articleId=${item.id}`
				})
			},
			handleSearch() {
				this.getScienceList()
			}
		},
	}
</script>

<style scoped lang="less">
	.content {
		position: absolute;
		width: 100%;
		height: 100vh;
		background-color: rgba(230, 230, 230, 1);

		.main {
			.sciencePage {
				padding-bottom: 6px;

				.itemBox {
					overflow: auto;

					.item {
						background-color: white;
						height: 18vh;
						margin-top: 20rpx;
						margin-left: 10rpx;
						margin-right: 10rpx;
						border-radius: 20rpx;

						.title {
							width: 90%;
							font-weight: 600;
							padding-top: 20rpx;
							padding-left: 20rpx;
							font-size: 105%;
							white-space:nowrap;
							overflow:hidden;
							text-overflow:ellipsis;
						}

						.bottomBox {
							display: flex;
							align-items: center;
							justify-items: center;
							justify-content:space-between;
							height: 70%;
							line-height: 150%;

							.text {
								// width: 70%;
								padding-left: 20rpx;
								padding-right: 20rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							.time {
								margin-top: 0rpx;
								padding-left: 20rpx;
								color: rgba(200, 200, 200, 0.7);
							}

							.pic {

								padding-right: 20rpx;

								image {
									width: 18vw;
									height: 18vw;
								}
							}
						}
					}
          .bottomBox{
            display: flex;
            align-items: center;
            justify-items: center;
            height:70%;
            line-height: 150%;
            .rightBox{
              padding-left: 20rpx;
              padding-right: 20rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .time{
              margin-top: 20rpx;
              padding-left: 20rpx;
              color: rgba(200,200,200,0.7);
            }
            .pic{
              padding-right: 20rpx;
              image{
                width: 18vw;
                height: 18vw;
              }
            }
          }
        }

					.none {
						text-align: center;
						height: 50px;
						line-height: 50px;
					}
				}

			}

			.searchPage {
				height: 100vh;
				padding-bottom: 6px;

				.title {
					background-color: #F8F8F8;
				}
			}
		}

	//搜索框
	.search-bar {
		width: 100%;
		height: 5vh;
		padding-top: 10rpx;
	}

	.search-bar-box {
		display: flex;
		margin: 0 auto;
		width: 630rpx;
		height: 70rpx;
		border: 1rpx solid black;
		margin-top: 2rpx;
		border-radius: 50rpx;
	}

	.search-span {
		width: 100rpx;
		height: 56rpx;
		margin-top: 6rpx;
		margin-left: 3rpx;
	}

	.search-text {
		width: 100%;
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #7f7f81;
	}

	.search-btn {
		background-color: #CCBE97;
		/* Green */
		color: white;
		text-align: center;
		display: inline-block;
		font-size: 30rpx;
		width: 200rpx;
		height: 70rpx;
		line-height: 65rpx;
		border-radius: 30rpx;
		letter-spacing: 3rpx;
	}
</style>
